<template>
    <el-upload
      ref="upload"
      class="upload-demo"
      action="http://127.0.0.1:8000/htglxt/upload/"
      :limit="1"
      :on-exceed="handleExceed"
      name="img"
      :auto-upload="false"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button class="ml-3" type="success" @click="submitUpload">
        上传文件
      </el-button>
      <template #tip>
        <div class="el-upload__tip text-red">
          最大上传文件为1  新文件会覆盖旧文件
        </div>
      </template>
    </el-upload>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { genFileId } from 'element-plus'
  import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
  
  const upload = ref<UploadInstance>()
  
  const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
  }
  
  const submitUpload = () => {
    upload.value!.submit()
  }
  </script>
  